<template>
	<view class="">
		<u-popup id="popup-box" :show="params.show" mode="center" bgColor="transparent" @close="cancel">
			<view class="ffffff mainpadding radius" style="width: 700rpx;">
				<view class="hui_text main_size bold">訂單編號：<text class="hei_text">{{params.data.uber_id}}</text></view>
				<view class="hui_text main_size bold margin_top2">商店名稱：<text
						class="hei_text">{{params.data.store_name}}</text></view>
				<view class="hui_text main_size bold margin_top2 flexleft"> <u-icon name="account-fill" color="#472d6e"
						size="18"></u-icon>
					顧客：<text class="hei_text">{{params.data.eater_name}}</text></view>
				<view class="hui_text main_size bold margin_top2 flexleft"> <u-icon name="phone-fill" color="#ff0000"
						size="18"></u-icon>
					電話：<text class="hei_text">{{params.data.eater_phone}}</text></view>
				<view class="hui_text main_size bold margin_top2" v-if="params.data.special_instructions">顧客備注：<text
						class="hei_text">{{params.data.special_instructions}}</text></view>

				<view class="hui_text main_size bold margin_top2 flexleft"> <u-icon name="grid-fill" color="#ffd45a"
						size="18"></u-icon>
					品項：</view>
				<view class="xiaohei main_size margin_top2" v-for="(item,index) in params.data.uberordergoods"
					:key="item.id">
					<view>
						<text>{{index+1}}. {{item.title}}</text>
						<text class="xiaohuang main_size">*{{item.quantity}}</text>
					</view>
					<view class="xiaohei margin_top1" v-show="item.special_instructions">{{item.special_instructions}}
					</view>
				</view>
				<view class="flexleft margin_top2">
					<view class="listbtn margin-right" style="background-color: #17a34a;" @click="jieshou">接受</view>
					<view class="listbtn" style="background-color: #ee4444;" @click="show=true">拒絕</view>
				</view>
			</view>
		</u-popup>
		<u-modal :show="show" showCancelButton confirmText="確認" cancelText="取消" confirmColor="#f5a623" title="選擇拒絕原因"
			@cancel="show=false" @confirm="confirmjj">
			<view class="slot-content">
				<view class="mainpadding">
					<picker-view indicator-style="height: 50px;" :value="currentvalue" @change="bindChange"
						class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in fpgd_arr" :key="index">{{item.name}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import HttpRequest from 'uview-ui/libs/luch-request';

	export default {
		name: "test",
		data() {
			return {
				primaryColor: '#1890FF',
				// #ifdef APP-PLUS
				eventChannel: null
				// #endif
				fpgd_name: "",
				fpgd_arr: [{
						name: "廚房已關閉",
						key: "KITCHEN_CLOSED"
					},
					{
						name: "客戶打電話取消",
						key: "CUSTOMER_CALLED_TO_CANCEL"
					},
					{
						name: "餐廳太忙了",
						key: "RESTAURANT_TOO_BUSY"
					},
					{
						name: "訂單驗證錯誤",
						key: "ORDER_VALIDATION"
					},
					{
						name: "商店已關閉",
						key: "STORE_CLOSED"
					},
					{
						name: "POS 尚未準備好",
						key: "POS_NOT_READY"
					},
					{
						name: "POS 處於離線狀態",
						key: "POS_OFFLINE"
					},
					{
						name: "門市訂單容量已滿",
						key: "CAPACITY"
					},
					{
						name: "地址問題",
						key: "ADDRESS"
					},
					{
						name: "其他",
						key: "OTHER"
					},
				],
				show: false,
				currentvalue: [0],
			}
		},
		created() {
			// #ifdef APP-PLUS
			this.eventChannel = this.getOpenerEventChannel();
			// #endif
		},
		methods: {
			confirmjj() { //拒絕
				this.show = false
				uni.showLoading({
					mask:true,
					title:"請稍後"
				})
				this.http.request("/api/Ubercl/clUberOrder", "POST", {
					uber_id: this.params.uber_id,
					status: 2,
					deny_reason: this.fpgd_arr[this.currentvalue[0]].key,
					deny_des: this.fpgd_arr[this.currentvalue[0]].name
				}).then(res => {
					uni.hideLoading()
					this.http.toast(res.msg)
					this.cancel()
				})
			},
			jieshou() {
				this.http.modal('提示', "是否確認接單", true, (resp) => {
					if(resp){
						uni.showLoading({
							mask:true,
							title:"請稍後"
						})
						this.http.request("/api/Ubercl/clUberOrder", "POST", {
							uber_id: this.params.uber_id,
							status: 1,
						}).then(res => {
							uni.hideLoading()
							this.http.toast(res.msg)
							this.cancel()
						})
					}
				})
			},
			bindChange(e) {
				console.log(e);
				const val = e.detail.value
				this.currentvalue = e.detail.value
			},
			cancel() {
				// #ifdef APP-PLUS
				let _this = this;
				uni.navigateBack({
					delta: 1,
					success() {
						_this.eventChannel.emit('cancel');
					}
				})
				// #endif
				this.hide()

				// #ifndef APP-PLUS
				//执行回调
				this.params.cancel && this.params.cancel();
				// #endif

			},
			confirm() {
				// #ifdef APP-PLUS
				let _this = this;
				uni.navigateBack({
					delta: 1,
					success() {
						_this.eventChannel.emit('confirm');
					}
				})
				// #endif
				this.hide();
				// #ifndef APP-PLUS
				//执行回调
				this.params.confirm && this.params.confirm();
				// #endif
			},
			// 弹窗关闭后需要重置popupConfig数据
			hide() {
				let _this = this;
				// 关闭弹窗
				this.$store.dispatch('updatePopupConfig', {
					show: false
				})
				setTimeout(() => {
					const config = {
						type: 1,
						showCancel: false,
						confirmText: '确定',
						cancelText: '取消',
						title: '',
						content: '',
						icon: 1,
						show: false
					}
					_this.$store.dispatch('updatePopupConfig', config)
				}, 100) // 这里时间就是弹窗显示隐藏动画时间
			}
		},
		computed: {
			params() {
				return this.$store.getters.popupConfig
			}
		}
	}
</script>

<style>
	page {
		background: transparent;
	}
</style>

<style lang="scss" scoped>
	.listbtn {
		padding: 15rpx 40rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
		color: #fff;
	}
</style>